<template>
    <div>
      <el-dialog top="5vh"
      :title="title"
      :visible.sync="visible"
      :width="width + 'px'"
      :before-close="onClose"
      :close-on-click-modal="false">
        <div class="container" :style="{height:height+'px'}">
          <slot name="content"></slot>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onClose">取 消</el-button>
          <el-button type="primary" @click="onConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
    export default {
      props: {
        title: {
          type: String,
          default: "标题",
        },
        visible: {
          type: Boolean,
          default: false,
        },
        width: {
          type: Number,
          default: 600,
        },
        height: {
          type: Number,
          default: 250,
        },
      },
      data() {
        return {};
      },
      methods: {
        onClose() {
          this.$emit("onClose");
        },
        onConfirm() {
          this.$emit("onConfirm");
        },
      },
    };
  </script>
  
  <style lang="scss" scoped>
    .container {
      overflow-x: initial;
      overflow-y: auto;
    }
  
    .el-dialog__wrapper {
      ::v-deep .el-dialog {
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
  
        .el-dialog__header {
          border-top-left-radius: 7px !important;
          border-top-right-radius: 7px !important;
          background-color: #1890ff;
  
          .el-dialog__title {
            color: #fff;
            font-size: 15px;
            font-weight: 700;
          }
  
          .el-dialog__close {
            color: #fff;
          }
        }
  
        .el-dialog__body {
          padding: 10px 10px !important;
        }
  
        .el-dialog__footer {
          border-top: 1px solid #e8eaec !important;
          padding: 10px !important;
        }
      }
    }
  </style>